<template>
    <div style="padding-top: 20px;">
        <el-form :model="detailsInfo" label-width="110px" :disabled="!isCanEdit" v-loading="loading">
            <el-form-item label="使用单位名称" prop="usingUnityName">
                <el-input v-model="detailsInfo.usingUnityName" placeholder="" style="width: 810px" />
            </el-form-item>
            <el-form-item label="设备所属区域" prop="area">
                <el-input v-model="detailsInfo.area" style="width: 300px" />
            </el-form-item>
            <div class="flex-v">
                <el-form-item label="单位联系人" prop="contacter">
                    <el-input v-model="detailsInfo.contacter" placeholder="" style="width: 300px" maxlength='11' />
                </el-form-item>
                <el-form-item label="联系人手机" prop="telNo" style="margin-left: 50px;">
                    <el-input v-model="detailsInfo.telNo" placeholder="" style="width: 350px" maxlength='11' />
                </el-form-item>
            </div>
            <div class="flex-v">
                <el-form-item label="设备类型" prop="productCategoryAddress">
                    <el-input v-model="detailsInfo.productCategoryAddress" style="width: 300px" maxlength='11' />
                </el-form-item>
                <el-form-item label="报检类型" prop="detectionApplyType" style="margin-left: 50px;margin-top: 10px;">
                    <div style="margin-top: -5px;margin-left: 30px;">
                        <el-radio-group v-model="detailsInfo.detectionApplyType">
                            <el-radio :label="1" size="large">自行检测</el-radio>
                            <el-radio :label="2" size="large">委托检测</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
            </div>
            <el-form-item label="检验检测机构" prop="inspectionAgencyName">
                <el-input v-model="detailsInfo.inspectionAgencyName" placeholder="" style="width: 810px" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="detailsInfo.remark" autosize type="textarea" placeholder="" style="width: 810px" />
            </el-form-item>
        </el-form>

        <div class="flex-stb" style="margin-top: 50px;">
            <div class="dialog-item-title">设备列表</div>
        </div>
        <el-table :data="deviceList" style="margin-top: 20px;">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column label="设备类别" align="center" prop="categoryName" />
            <el-table-column label="使用登记证号" align="center" prop="useRegistrationCode" />
            <el-table-column label="出厂编号" align="center" prop="productNumber" />
            <el-table-column label="单位内编号" align="center" prop="usingUnityCode" />
            <el-table-column label="所在区域" align="center" prop="district" />
            <el-table-column label="下次检验日期" align="center" prop="nextCheckDate" />
        </el-table>
    </div>
</template>
  
<script setup>
import {
    apiBusinessDetails,
    apiBusinessDeviceList,
} from "@/api/detection";

const loading = ref(false)
const deviceList = ref([])

const props = defineProps({
    infoId: {
        type: Number,
        default: -1
    },
    isCanEdit: {
        type: Boolean,
        default: true
    },
});

watch(() => props.infoId, value => {
    getDetails()
    getDeviceList()
})

const detailsInfo = ref({})

const getDetails = () => {
    loading.value = true
    apiBusinessDetails(props.infoId).then(res => {
        loading.value = false
        if (res.data) {
            res.data.area = res.data.province + res.data.city + res.data.district
            detailsInfo.value = res.data
        }
    }).catch(err => {
        loading.value = false
    })
}

//获取关联设备列表
const getDeviceList = () => {
    apiBusinessDeviceList({
        "pageNum": 1,
        "pageSize": 100,
        "id": props.infoId
    }).then((res) => {
        if (res) {
            deviceList.value = res.data.records
        }
    })
}

if (props.infoId) {
    getDetails()
    getDeviceList()
}

</script>
  
<style scoped lang="scss">
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}
</style>